<template>
    <el-container>
        <el-header style="height: 130px">
          <div class="title"><span>行为决策实验平台</span></div>
          <headT></headT>
      </el-header>

      <el-main>
        <timeT></timeT>
        <kuangjia></kuangjia>
       <div class="tip">
        <span class="text">请您拉动滑动条并作出本轮的资产配置:</span>
        <span class="strong">(注意您有25s的时间完成决策并点击确认提交)</span>
       </div>
       <div class="restmoney"><span class="text">当前未配置资产比例为：<span class="value">{{value}}%</span></span></div>
      <div class="sco">
        <div class="scroll">
        <span class="name">基金一</span><el-slider @input="input" show-input v-model="value1" :step="1"></el-slider>
       </div>
       <div class="scroll">
        <span class="name">基金二</span><el-slider @input="input" show-input v-model="value2" :step="1"></el-slider>
       </div>
       <div class="scroll">
        <span class="name">基金三</span><el-slider @input="input" show-input v-model="value3" :step="1"></el-slider>
       </div>
      </div>

      <el-button class="btn" @click="to">确认<van-count-down auto-start :time="countDownTime" format="ss" @finish="countFinish" id="color"/></el-button>
      </el-main>
      <footerT></footerT>
    </el-container>
</template>


<script>
//后端
import {getStart3} from "@/api/usingTime";
import {handlerUser} from "@/api/insertExperiment";
import kuangjia from '@/components/kuangjia.vue'
import timeT from '@/components/time.vue'
import footerT from '@/components/footer.vue'
import {ref} from "vue";
import headT from '@/components/headT.vue'
import {selectAllByExperimentId} from "@/api/Initial";

let valueStorage1 = 0
let valueStorage2 = 0
let valueStorage3 = 0
export default{
    components:{
        kuangjia,
        timeT,
        footerT,
        headT
    },
  data(){
      return {
        value: 100,
        value1:valueStorage1,
        value2:valueStorage2,
        value3:valueStorage3,
        countShow: false,
        timer: null,  //循环计时器
        countDownTime: this.$cookies.get('roundTimes') == null ? 0 : parseInt(this.$cookies.get('roundTimes')) * 1000
      }
    },
  mounted() {
    // getStart3().then(res => {
    //   console.log(res)
    // })
    // let clock = window.setInterval(() => {
    //   this.totalTime--
    //   if (this.totalTime < 0) {
    //     window.clearInterval(clock)
    //     this.totalTime = setStageTime
    //     // this.$router.push('/look')
    //   }
    // }, 1000)
    //因为Cookies.get()不能获取expires，所以才设定value值为expires方便获取
    let cookiesTime = Date.parse(this.$cookies.get('roundTimes'));
    // 把要过期的时间转化为时间戳方便计算
    // Date.parse方法用来解析日期字符串，将日期格式转化为字符串（ES5）
    if (cookiesTime) {
      // 有cookie值则继续倒计时
      this.countShow = true;
      this.timer = setInterval(() => {
        let nowTime = Date.now();
        // Date.now方法返回当前时间戳
        this.countDownTime = cookiesTime - nowTime;
        if (this.countDownTime <= 0) {
          this.countFinish();
        }
      }, 0);
    } else {
      this.countFinish();
    }
  },
    methods:{
      input(){
        if(this.value < 0) {
          this.value1 = 0
          this.value2 = 0
          this.value3 = 0
        }
        valueStorage1 = this.value1
        valueStorage2 = this.value2
        valueStorage3 = this.value3
        this.value = 100 - valueStorage1 - valueStorage2 - valueStorage3

      },
      to(){
        var form = {
          experimentId: parseInt(this.$cookies.get('sites')),
          stageId: this.$cookies.get('stageId') == null ? 1 : parseInt(this.$cookies.get('stageId')),
          roundId: this.$cookies.get('roundId') == null ? 1 : parseInt(this.$cookies.get('roundId')),
          userId: parseInt(this.$cookies.get('userId')),
          fundOne: this.value1 / 100,
          fundTwo: this.value2 / 100,
          fundThree: this.value3 / 100,
        }
        console.log(form)
        console.log(typeof form.userId)
        handlerUser(form.experimentId,form.stageId,form.roundId,form.userId,form.fundOne,form.fundTwo,form.fundThree).then(res => {
          console.log(res)
        })
        this.$router.push('/look')
      },
      //倒计时结束要执行的方法
      countFinish() {
        //清除计时器
        clearInterval(this.timer);
        //提交
        // this.to()
      }
    },
  setup() {
    const time = ref( 25*1000);
    return { time };
  },
}

</script>

<style scoped>

.el-header{
      padding: 0;
  }

  .title{
      height: 100px;
      color: aliceblue;
      text-align: center;
      line-height: 100px;
      font-size: 50px;
      font-weight: 800;
      background-image: linear-gradient(
        DodgerBlue,
        DeepSkyBlue
      );
    }

    .round{
      height: 29px;
      box-sizing: content-box;
      border-bottom: 2px solid #dcdcdc;
      padding-left: 150px;
      line-height: 29px;
      font-size: 10px;
      font-weight: 600;
    }

    .el-main {
      /* background-color: #E9EEF3; */
      background-color: aliceblue;
      color: #333;
      text-align: center;
      height: 560px;
    }

    .tip,.restmoney{
      height: 30px;
      margin: 0 auto;
      width: 1100px;
      position: relative;
    }

    .text{
        position: absolute;
        left: 0;
        top: 0;
        font-size: 16px;
        font-weight: 600;
       line-height: 30px;
    }

    .strong{
        font-size: 20px;
        font-weight: 1000;
        color: #FFC125;
    }

    .sco{
        width: 800px;
        height: 200px;
        margin: 0 auto;
    }

    .name{
        color: #333;
        font-weight: 700;
    }

    .scroll{
       width: 500px;
       margin: 0 auto;
    }

    .btn{
      width: 200px;
      height: 45px;
      background-color: #0071fc;
      border: none;
      border-radius: 10px;
      font-weight: 800;
      color: #323233;
    }

    .btn:hover{
      background-color: LightSkyBlue;
      color: #333;
    }

    .value{
      color: #FF552E;
      font-size: 25px;
    }

</style>
